Hello and welcome to the part two of creating the Happe functionality using javascript.
I have two functions here.
The first function is called calev default from line 22 to 25.
What this function will do it all clear.
For example once you've typed in a task and it will check to make sure that the task is still not hanging
around in the input box.
So that's what this value is me.
Any values in there it is.
If this is a value a default value is true to you want to see the value.
They include the value and set the value which is a value because to make it blank.
That's what it is.
So he's basically to clear any import that is left hanging around after you've added a task so that's
what that function is there for.
Okay.
The second function which is called the remove function from line 27 to 236.
All right.
So what you remove from Channel will do.
It is called When the user clicks on any of the task to remove them so they click on the remove button
on the task they no longer need.
It will remove the removed button will trigger the function and the item will be removed.
All right.
So this function contains two variables variable Heidi which is set equal to a D.
Don't get attribute this refers to the quadrent Dom element which is being removed as of the time the
user clicks on the remote button.
Okay so we'd retrieve the retrieve the value of this did attribute using the get attribute method.
Okay this is the index of this specific to do item among the to do items in the database.
Okay so after retrieving the current list off to do I will use the splice method to remove a specific
element from the javascript hurry back and we store the new task back in the database so you use push
to append and then use splice to remove.
Okay so once the item has been removed we use the splice metal to remove that idae and then store what's
left in local storage.
Okay that's basically what this function done.
I notice again with core this schull function here is not defined yet again.
It's your form John what it called.
It will show what's in the database and we've set a return value so that nothing else is triggered after
the show function has been called the final function and we are going to create this this one here called
the show we have been calling we've call this function several times within their functions.
Here we where we actually defined the function the function will display the current to do list stored
in the database.
Okay so if you notice the first thing it does on line 39 with a variable here.
Is it cause they get to dos.
Okay so you caused to get to do is to get the list off a tree of to do items regardless if they are
empty or not on line 41.
We've got a variable quad hastier mail and said it was for the value of a tag which is an or an ordered
list.
So here we manually creatine snippet of some hastier MIL tag from these variable using the variable
to set the value.
Okay so the UI element is an order list who was so set it up with on or at least they need to have an
airline item which is a list act.
So this will be a list item for each of the to do entry.
In addition to the content of the to dos array I've also added botan to each of the list items.
Okay so you can see here added a button.
This button will be added as a cluster to be added to each of the list item so as you add a task it
will automatically insert a button that users can use to remove the task if they no longer require the
task.
So each of the button belongs to a class cord and remove and each button has an I.D. containing the
index of the to do item in the list retrieved from the database.
Okay.
So the button's well enabled the users to remove the item.
They no longer require from the list on line 47 the documents get elemen i.d. inside the value passed
it to do.
What that will do is to will insert their newly generated haish thier mail snippet in the original load
in the original document loaded from the server.
Alright so even light inserted inside hastier out.
It actually replaces the content of the element with the idea to dos.
That's what that meant.
Okay this means in subsequent calls it will just show the new list regardless of what was there earlier.
That's basically what it does.
The in a statement labels it to do that in the next couple of lines from forward in line all the way
to 51.
So the get elemen by class name.
This method is used to fetch all the buttons that are in the remove class.
So these are the buttons we have we added previously added to each of you to do item and ball so took
each button.
We assign a event listener that will listen out for any.
Click on the button.
When that happens it will be triggered.
Okay.
Once a user clicks it will be triggered and the connect.
When the user clicks on a button it triggers off the function.
Was the click it's done.
The list now triggers of the function the item is down removed.
As you can see here we've passed it.
The click is event the remove is the function.
Okay so this is event where you attach an event list.
Now there must be Param if there's past one would be the first would be the event you'll listen in out
for.
And this second would be the function that would be triggered.
When that occurs.
So when that causes remove function all come into play.
And the item will be removed via the button like 55 year old documents don't get element by eidy and
move past the idea ad which is the task when you add in the task it got an even bigger event list attached
to it as well.
So what happens when you add a task for example and you click if you click on the task but I've added
it it all use it would trigger this function call and then core this show function here.
All right so was that is done is show function here will be called and the list of items will be displayed.
So that's set for the Java's group called so I'll save that and if we run our app we should get it working
now.
All right so this is our app complete.
Let's do some tests and see as too.
Pair lose two bet.
Okay go.
Thanks.
Okay so say blackfire refresh.
You can see the daytime's to persistent.
All right so we can just click to delete if we no longer need that.
And that will disappear.
So now let me let's see where this data is actually saved.
So you know where to look if you need to to check where the data is stored.
You click on F 12 on your keyboard.
So they have 12 key should bring up a screen like this.
Make sure you've got a tab code resources.
If you can see.
Just expand it.
And if you see a list and I am using Google Chrome.
So once you click on resources you should get this list item here.
These are the databases on the local storage.
You expand that and click on file so you can see here the key because local storage stores data using
the key and then a value.
So the key here is to do.
Okay.
Which is this list.
These are the values you see.
And even more lists I add on here we just get upended here so you can see the value here.
Is this one.
So if not that's a let me say discount.
Unlikely add and I refresh my browser.
You see the discount there.
It's popped up there.
All right so you just does them as an array.
You can see the the square brackets.
So restores them as an array.
So that's basically where your eyes turn.
Our store fully to do list.
So that's it for the project.
Thanks for watching.
I hope he's going to be useful to you.
This is a practical tool that you can use yourself or share with others.
Thanks for watching.
Bye for now.